<template>
	<view class="content" v-if="show==1">
		<view class="top">
			<view class="top2" @click="qiehuan(2)">
				<text :class="type==2?'active':''">师傅</text>
			</view>
			<view class="top2" @click="qiehuan(1)">
				<text :class="type==1?'active':''">服务</text>
			</view>
			
		</view>
		<view class="news" v-if="type==1">
			<view class="goods4" v-for="(g,index) in goods" :style="'right:'+g.right+'px;'" :data-index="index" @touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd">
				<view class="orders" @click="gurl" :data-id="g.id">
					<view style="width:100%;display: flex;">
					<image :src="g.avatar" mode="aspectFit" class="touxiang"></image>
					<view class="goods4-2">
						<view class="goods4-3">
							<view class="fenlei" style="width:100%;">{{g.cate2}}</view>
						</view>
						<view class="goods4-3">
							<view class="shengfen" style="width:100%;">S{{g.teacher_id}}-{{g.nickname}}</view>
							
						</view>
						<view class="goods4-3">
							<view class="shengfen">{{g.nianji}}</view>
							<view class="zhuangtai" style="color:red;">{{zdtype==1?'㉿':'￥'}}{{g.price}}</view>
						</view>
						<view class="goods4-3">
							<view class="shengfen">{{g.fuwu_cate}}</view>
							<view class="zhuangtai">已售{{g.sales}}</view>
						</view>
					</view>
					</view>
					<view class="weizhi">
						<image src="../../static/images/map3.png" mode="aspectFill"></image>
						<view class="weizhi2">{{g.address}}</view>
					</view>
				</view>
				<view class="remove" @click="del" :data-index="index">移除</view>
			</view>
		</view>
		<view class="empty" v-if="!goods[0] && type==1">暂无任何数据</view>
		
		<view class="goods" v-if="type==2">
			<view class="goods3">
				<view class="goods7" v-for="(g,index) in teacher" :style="'right:'+g.right+'px;'" :data-index="index" @touchstart="drawStart2" @touchmove="drawMove2" @touchend="drawEnd2">
					<view class="orders" @click="gurl2" :data-id="g.tid">
					<view class="goods7-0">
						<image class="goods7-1" :src="g.avatar" mode="aspectFill"></image>
						<view class="goods7-2">
							<view class="goods7-3">T{{g.tid}}-{{g.nickname}}</view>
							<view class="goods77">
								<view class="goods7-7">{{g.cate}}</view>
								<view class="goods7-4">距您{{g.juli}}km</view>
							</view>
							<view class="goods5">{{g.px_year}}年装修经验</view>
							<view class="goods6" v-if="g.is_real==1">有实体店铺</view>
						</view>
					</view>
					<view class="map">
						<image src="../../static/images/map2.png" mode="aspectFit"></image>
						<view class="map2">{{g.address}}</view>
					</view>
					</view>
					<view class="remove" @click="del2" :data-index="index">移除</view>
				</view>
				
			</view>
			
		</view>
		<view class="empty" v-if="!teacher[0] && type==2">暂无任何数据</view>
	</view>
</template>

<script>
	var app=getApp();
	export default {
		data() {
			return {
				show:0,
				zdtype:0,
				goods:[],
				teacher:[],
				type:2,
				lng:0,
				lat:0,
				startX :0,
				delBtnWidth: 80,
				startX2 :0,
				delBtnWidth2: 80,
				page:1,
				next:0
			}
		},
		onLoad() {
			const uid = uni.getStorageSync('uid');
			if(app.isBlank(uid)==true){
				app.error_msg("请先登录");
			}
			var that=this;
			//#ifdef APP-PLUS
			uni.getSystemInfo({
			    success: function (res) {
					if(res.platform=='ios'){
						//that.zdtype=1;
					}
			    }
			});
			//#endif
			this.uid=uid;
			uni.showLoading({
			    title: '数据加载中'
			});
			//this.getdata2(0,1);return false;
			uni.getLocation({
			    type: 'gcj02',
			    success: function (res) {
					that.lng=res.longitude;
					that.lat=res.latitude;
					that.getdata2(0,1);
			    },
				fail(e){
					that.getdata2(0,1);
				}
			});
		},
		methods: {
			getdata(t=0,tt=0){
				var that=this;
				if(tt==0){
				uni.showLoading({
				    title: '数据加载中'
				});
				}
				uni.request({
				    url: app.globalData.url+"user/coll",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {page:that.page,uid:that.uid,lng:that.lng,lat:that.lat},
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							app.error_msg(res.data.msg);
						}
						if(t==1){
							that.goods=res.data.data.goods
						}else{
						that.goods=that.goods.concat(res.data.data.goods)
						}
						that.next=res.data.data.next
						that.page++
						that.show=1;
				    }
				});
			},
			getdata2(t=0){
				var that=this;
				uni.showLoading({
				    title: '数据加载中'
				});
				uni.request({
				    url: app.globalData.url+"user/coll2",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {page:that.page,uid:that.uid,lng:that.lng,lat:that.lat},
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							app.error_msg(res.data.msg);
						}
						if(t==1){
							that.teacher=res.data.data.teacher
						}else{
							that.teacher=that.teacher.concat(res.data.data.teacher)
						}
						that.next=res.data.data.next
						that.page++
						that.show=1;
				    }
				});
			},
			qiehuan(t){
				this.page=1;
				this.next=0;
				this.type=t;
				if(t==1){
					this.getdata(1);
				}else{
					this.getdata2(1);
				}
			},
			del2(e){
				var that=this;
				var index=e.currentTarget.dataset.index;
				var id=this.teacher[index].id
				uni.showModal({
				    content: '确定要取消收藏该老师吗？',
				    success: function (res) {
				        if (res.confirm) {
				            uni.showLoading({
				                title: '移除中'
				            });
				            uni.request({
				                url: app.globalData.url+"user/coll_del2",
				            	method:"POST",
				            	dataType:"json",
				            	header: {
				            	    'content-type': 'application/x-www-form-urlencoded'
				            	},
				                data: {uid:that.uid,id:id},
				                success: (res) => {
				            		uni.hideLoading();
				            		if(res.data.code!=1){
				            			uni.showToast({
				            			    title: res.data.msg,
				            				icon:'none',
				            			    duration: 1500
				            			});
				            			return false;
				            		}
				            		uni.showToast({
				            		    title: res.data.msg,
				            			icon:'success',
				            		    duration: 1000
				            		});
				            		that.teacher.splice(index,1);
				                }
				            });
				        }
				    }
				});
				
			},
			del(e){
				var that=this;
				var index=e.currentTarget.dataset.index;
				var id=this.goods[index].id
				uni.showModal({
				    content: '确定要取消收藏该课程吗？',
				    success: function (res) {
				        if (res.confirm) {
				            uni.showLoading({
				                title: '移除中'
				            });
				            uni.request({
				                url: app.globalData.url+"user/coll_del",
				            	method:"POST",
				            	dataType:"json",
				            	header: {
				            	    'content-type': 'application/x-www-form-urlencoded'
				            	},
				                data: {uid:that.uid,id:id},
				                success: (res) => {
				            		uni.hideLoading();
				            		if(res.data.code!=1){
				            			uni.showToast({
				            			    title: res.data.msg,
				            				icon:'none',
				            			    duration: 1500
				            			});
				            			return false;
				            		}
				            		uni.showToast({
				            		    title: res.data.msg,
				            			icon:'success',
				            		    duration: 1000
				            		});
				            		that.goods.splice(index,1);
				                }
				            });
				        }
				    }
				});
				
			},
			drawStart(e) {
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				for (var index in this.goods) {
					this.goods[index].right=0;
				}
				var touch = e.touches[0];
				var item = this.goods[e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;
				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.goods[e.currentTarget.dataset.index].right=disX;
				} else {
					this.goods[e.currentTarget.dataset.index].right=0;
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				var item = this.goods[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					this.goods[e.currentTarget.dataset.index].right=this.delBtnWidth;
				} else {
					this.goods[e.currentTarget.dataset.index].right=0;
				}
			},
			
			drawStart2(e) {
				var touch = e.touches[0];
				this.startX2 = touch.clientX;
			},
			//触摸滑动
			drawMove2(e) {
				for (var index in this.teacher) {
					this.teacher[index].right=0;
				}
				var touch = e.touches[0];
				var item = this.teacher[e.currentTarget.dataset.index];
				var disX = this.startX2 - touch.clientX;
				if (disX >= 20) {
					if (disX > this.delBtnWidth2) {
						disX = this.delBtnWidth2;
					}
					this.teacher[e.currentTarget.dataset.index].right=disX;
				} else {
					this.teacher[e.currentTarget.dataset.index].right=0;
				}
			},
			//触摸滑动结束
			drawEnd2(e) {
				var item = this.teacher[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth2 / 2) {
					this.teacher[e.currentTarget.dataset.index].right=this.delBtnWidth2;
				} else {
					this.teacher[e.currentTarget.dataset.index].right=0;
				}
			},
			gurl(e){
				var id=e.currentTarget.dataset.id;
				uni.navigateTo({
				    url: '/pages/goods/detail?id='+id
				});
			},
			gurl2(e){
				var id=e.currentTarget.dataset.id;
				uni.navigateTo({
				    url: '/pages/teacher/detail?id='+id
				});
			},
			onReachBottom(){
				if(this.next==1){
					this.next=0;
					this.getdata();
				}
			}
		}
	}
</script>

<style>
	.weizhi2{width:100%;height:25px;line-height: 25px;flex:1;overflow: hidden;}
	.weizhi image{width:15px;height:15px;margin-top: 5px;}
	.weizhi{width:100%;height:25px;display: flex;}
	.touxiang{width:100px;height:100px;margin-right: 10px;border-radius: 5px;}
	page{background-color: rgb(245, 245, 245);}
	.map2{width:100%;height:20px;line-height: 20px;color:#666;overflow: hidden;flex: 1;}
	.map image{width:16px;height:16px;margin-top: 2px;margin-right: 5px;}
	.map{width:100%;display: flex;margin-top: 5px;}
	.goods6{width:100%;height:25px;line-height: 25px;color:#999;overflow: hidden;}
	.goods5{width:100%;height:25px;line-height: 25px;color:#999;overflow: hidden;}
	.goods77{width:100%;overflow: hidden;}
	.goods7-9{width:100%;height:25px;line-height: 25px;color:#666;overflow: hidden;}
	.goods7-8 text{color:#666;font-size: 0.8rem;}
	.goods7-8{width:100%;height:25px;line-height: 25px;overflow: hidden;}
	.goods7-7{width:50%;height:25px;color:#05c160;float: left;overflow: hidden;line-height: 25px;}
	.goods7-6{color:#666;display: block;width:100%;height:25px;line-height: 25px;overflow: hidden;text-align: right;}
	.goods7-5{font-size: 0.9rem;color:#fe2424;display: block;width:100%;height:25px;line-height: 25px;overflow: hidden;text-align: right;}
	.goods7-0{width:100%;display: flex;}
	.goods7-4{width:50%;height:25px;float: left;color:#05c160;overflow: hidden;line-height: 25px;}
	.goods7-3{width:100%;height:25px;line-height: 25px;overflow: hidden;font-weight: 600;font-size: 1rem;}
	.goods7-2{width:100%;height:100px;flex: 1;}
	.goods7-1{width:100px;height:100px;border-radius: 5px;margin-right: 10px;}
	.goods7{width:96%;padding: 10px 2%;background-color: #fff;margin: 5px 0px;border-radius: 5px;margin-bottom: 10px;position: relative;}
	.goods3{width:94%;margin: 0px 3%;overflow: hidden;}
	.goods2-2{font-size: 0.8rem;float: right;color:#999;}
	.goods2-1{font-size: 1rem;font-weight: 600;float: left;border-left: 5px #05c160 solid;padding-left: 8px;line-height: 18px;}
	.goods2{width:100%;height:18px;line-height: 18px;overflow: hidden;}
	.goods{width:100%;margin-top: 55px;}
	
	.remove {
		    width: 80px;
		    height: 100%;
		    background-color: red;
		    color: white;
		    position: absolute;
		    top: 0;
		    right: -90px;
		    display: flex;
		    justify-content: center;
		    align-items: center;
			font-size: 16px;
		}
	.orders{width:100%;}
	.top2 .active{color:#05c160;border-bottom: 3px #05c160 solid;}
	.top2 text{font-size: 1rem;font-weight: 550;}
	.top2{width:50%;height:50px;float: left;text-align: center;line-height: 50px;}
	.top{width:100%;overflow: auto;height:50px;position: fixed;top:0px;background-color: #fff;z-index:9999;border-bottom: 1px rgb(245, 245, 245) solid;}
	.empty{width:100%;margin-top: 30%;text-align: center;}
	
	.goods44{width:100%;overflow: hidden;}
	.goods4-9{width:100%;height:22px;line-height: 22px;overflow: hidden;font-size: 0.8rem;}
	.goods4-8 text{color:#666;font-size: 0.8rem;}
	.goods4-8{width:100%;height:22px;line-height: 22px;overflow: hidden;font-size: 0.8rem;}
	.goods4-7{width:70%;height:44px;float: left;}
	
	.goods4-4{width:30%;height:44px;float: left;line-height: 44px;text-align: center;color:#fe2424;font-size: 1.5rem;}
	.guanjianci{width:100%;height:25px;line-height: 25px;overflow: hidden;font-size: 0.8rem;}
	.zhuangtai{width:30%;height:25px;line-height: 25px;float: left;overflow: hidden;font-size: 0.8rem;text-align: right;}
	.shengfen{width:70%;height:25px;line-height: 25px;overflow: hidden;float: left;font-size: 0.8rem;}
	.nianji{width:30%;height:25px;line-height: 25px;text-align: right;float: left;color:red;}
	.fenlei{width:70%;height:25px;line-height: 25px;overflow: hidden;font-weight: 600;font-size: 0.9rem;float: left;}
	.goods4-3{width:100%;overflow: hidden;}
	.goods4-2{width:100%;flex: 1;}
	.goods4-1{width:120px;height:80px;border-radius: 5px;margin-right: 10px;}
	.goods4{width:96%;padding: 10px 2%;border-radius: 5px;display: flex;position: relative;background-color: #fff;margin: 8px 0px;}
	.news{width:94%;margin:0px 3%;overflow: hidden;margin-top: 55px;}
</style>
